<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>积分商城</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
		<link rel="stylesheet" type="text/css" href="../css/first-page.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="integral">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">积分商城</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<div class="inte-mine">
				<!-- 轮播图 -->
				<div class="">
					<ul class="inte-side">
						<li class="images"><img src="../img/integral.jpg" class="img"></li>
					</ul>
				</div>
				<ul class="space-around bottom">
					<li class="lt">我的积分</li>
					<li class="lt">历史兑换</li>
				</ul>
			</div>
			<div class="into-four">
				<ul class="space-around">
					<li>
						<div class="images">
							<img src="../img/integral01.svg" class="img">
						</div>
						<span>合亿户外</span>
					</li>
					<li>
						<div class="images">
							<img src="../img/integral02.svg" class="img">
						</div>
						<span>精选小件</span>
					</li>
					<li>
						<div class="images">
							<img src="../img/integral03.svg" class="img">
						</div>
						<span>合亿好礼</span>
					</li>
					<li>
						<div class="images">
							<img src="../img/integral04.svg" class="img">
						</div>
						<span>特惠票务</span>
					</li>
				</ul>
			</div>

			<div class="into-content">
				<div class="top space-between">商品兑换
					<div class="image">
						<img src="../img/reverse02.svg" class="reverse">
					</div>
				</div>
				<ul class="list-commodity flex" id="list-commodity">
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
					<li>
						<div class="images">
							<img class="imgs">
						</div>
						<div class="yellow"></div>
						<p class="text"></p>
						<div class="list-bottom">
							<span class="price"></span>
							<em class="convert"></em>
						</div>
					</li>
				</ul>
			</div>

			<div class="menus">
				<nav class="content" id="menus-con">
					<a href="#" class="con">首页</a>
					<a href="#" class="con">个人中心</a>
					<a href="#" class="con">户外活动</a>
				</nav>
				<div class="images" id="menus">
					<img src="../img/menus.png" class="imag">
				</div>
			</div>

			<a href="#" class="return-top">
				<img src="../img/to-top.svg" class="to-top">
			</a>
		</div>

		<script type="text/javascript">
			function commodity() {
				mock.comList.forEach(function(obj, index) {
					let litCommodit = document.getElementById('list-commodity');
					let convert = document.getElementsByClassName("convert");
					let imgs = litCommodit.getElementsByClassName('imgs');
					let yellow = litCommodit.getElementsByClassName('yellow');
					let text = litCommodit.getElementsByClassName('text');
					let price = litCommodit.getElementsByClassName('price');

					imgs[index].src = obj.listcom;
					yellow[index].innerHTML += obj.listyello;
					text[index].innerHTML += obj.listtext;
					price[index].innerHTML += obj.listprice;
					convert[index].innerHTML += '兑换';

				})

				let menus = document.getElementById("menus");
				let content = document.getElementById("menus-con");
				let n = 1;
				menus.addEventListener('click', function() {
					if (n) {
						content.style.height = 13.89 + 'rem';
						content.style.opacity = 0.9;
						n = 0
					} else {
						content.style.height = 0;
						setTimeout(function() {
							content.style.opacity = 0;
						}, 10);
						n = 1;
					}
				})
			}
			commodity(); //商品列表动态创建
		</script>
	</body>
</html>
